import React, { useMemo, memo } from "react";
import PropTypes from "prop-types";
import "./Nav.css";
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import classnames from 'classnames'

const Nav = memo(function Nav (props) {
  const { date, prev, next, isPrevDisabled, isNetDisabled } = props;

  const currenString = useMemo(() => {
    const d = dayjs(date)
    return d.format('M月D日') + d.locale('zh-cn').format('ddd');
  }, [date])

  return <div className="nav">
    <span className={classnames('nav-prev', { 'nav-disabled': isPrevDisabled })} onClick={prev}>前一天</span>
    <span className="bav-current">{currenString}</span>
    <span className={classnames('nav-next', { 'nav-disabled': isNetDisabled })} onClick={next}>后一天</span>
  </div>;
})

Nav.propTypes = {
  date: PropTypes.number.isRequired,
  prev: PropTypes.func.isRequired,
  next: PropTypes.func.isRequired,
  isPrevDisabled: PropTypes.bool.isRequired,
  isNetDisabled: PropTypes.bool
};


export default Nav
